<template>
    <view class="container">
        <u-navbar
            title="我的钱包"
            :autoBack="true"
            leftIconSize="50rpx"
            :bgColor="'rgba(90, 152, 243, '+bgOpacity+')'"
            :titleStyle="{
                fontSize: '34rpx',
                fontWeight: 'bold',
                color: '#FFFFFF',
            }"
			height="100rpx"
        >
            <view slot="right" @click="$u.route('pages_v2/paymentMethod/index')" class="navbar-right">收款方式</view>
        </u-navbar>
        <view class="bg" id="bg" :key="walletId"></view>
        <view class="balance-card">
            <view class="balance-info">
                <view class="balance-tips">提现到账日期为T+1天</view>
                <view class="balance-label">总资产(元)</view>
                <u-text
                    :text="walletInfo.balance? walletInfo.balance:0"
                    size="48rpx"
                    bold
                    lineHeight="67rpx"
                    align="center"
                    margin="8rpx 0 0 0"
                ></u-text>
                <view class="btn-info">
                    <view class="btn-recharge" @click="rechange()">充值</view>
                    <view class="btn-withdrawal" @click="$u.route('pages_v2/wallet/withdraw')">提现</view>
                </view>
            </view>
        </view>
        <view class="balance-log-card">
            <u-sticky
                :zIndex="1"
                bgColor="#ffffff"
                :customNavHeight="98+statusBarHeight"
            >
                <u-tabs
                    :list="tabList"
                    lineColor="#5D5D5D"
                    lineWidth="69rpx"
                    lineHeight="5rpx"
                    activeStyle="font-size: 26rpx;color: #5D5D5D;line-height: 37rpx;"
                    inactiveStyle="font-size: 26rpx;color: #888888;line-height: 37rpx;"
                    :itemStyle="{
                        flex: 1,
                        height: '100rpx',
                        borderBottom: '1px solid #EEEEEE',
                        padding: '0 40rpx'
                    }"
                    :scrollable="false"
                    :current="tabsIndex"
                    @change="handleChange"
                ></u-tabs>
            </u-sticky>
            <view class="balance-log">
                <view class="balance-list" v-if="walletList.length > 0">
                    <block>
                        <view class="balance-list-item" v-for="item in walletList" :key="item.id">
                            <u-icon
                                :name="getIconSrc(item.money)"
                                width="54rpx"
                                height="54rpx"
                            ></u-icon>
                            <view class="balance-log-info">
                                <view class="balance-log-num">
                                    <u-text
                                        :text="item.description"
                                        size="28rpx"
                                        color="#4A4A4A"
                                    ></u-text>
                                    <u-text
                                        :text="item.money>0? '+ ' + item.money:item.money"
                                        size="32rpx"
                                        :color="item.money>0? '#356CE7':'#4A4A4A'"
                                        align="right"
                                    ></u-text>
                                </view>
                                <u-text
                                    :text="item.createAt|dateAtFormat"
                                    size="24rpx"
                                    color="#888888"
                                    margin="16rpx 0 0 0"
                                ></u-text>
                            </view>
                        </view>
                    </block>
                </view>
                <u-empty
                    mode="data"
                    width="400rpx"
                    height="400rpx"
                    icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                    class="empty"
                    textSize="36rpx"
                    v-else
                >
                </u-empty>
            </view>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 8"
                marginTop="40rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
        </view>
    </view>
</template>

<script>
    import { getWalletData, getWalletLogPage } from "@/config/api"
    import { parseTime } from "@/untils"
    export default {
        name: "index",
        data() {
            return {
                tabList: [
                    {
                        name: "全部",
                        type: null
                    },
                    {
                        name: "收入",
                        type: "income"
                    },
                    {
                        name: "支出",
                        type: "expenditure"
                    }
                ],
                tabsIndex: 0,
                sourceType: [
                    {
                        name: "topUp",
                        icon: "https://img.ionepin.com/cd0dba2f52d9d4e4b8adb1d9cf031f41fcd5e19f.png"
                    },
                    {
                        name: "withdraw",
                        icon: "https://img.ionepin.com/f0493e240a8570a3fed61ff5ead6781799b2ef7a.png"
                    },
                    {
                        name: "agent",
                        icon: "https://img.ionepin.com/731cba4f498921b84fb819189df2b6da76c59eb9.png"
                    }
                ],
                walletInfo: {},
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    type: null
                },
                walletList: [],
                total: 0,
                scrollTop: 0,
                bgViewHeight: 0,
                statusBarHeight: 0
            }
        },
        filters: {
          dateAtFormat(val) {
              return parseTime(val, '{y}.{m}.{d} {h}:{i}:{s}')
          }
        },
        async onPullDownRefresh() {
            await this.getWalletInfo()
            this.listQuery.page = 1
            await this.getData()
            uni.stopPullDownRefresh()
        },
        onHide() {
            uni.stopPullDownRefresh()
        },
        computed: {
            bgOpacity() {
                if(this.scrollTop===0) {
                    return 0
                } else if (this.scrollTop < this.bgViewHeight) {
                    var opacity = Math.floor(this.scrollTop/this.bgViewHeight * 10) / 10
                    return  opacity
                } else {
                    return 1
                }
            },
            loadStatus() {
                if (this.total > this.walletList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            },
            walletId() {
                if (this.$store.getters.walletId) {
                    this.getWalletInfo()
                }
                return this.$store.getters.walletId
            }
        },
        onLoad() {
            const res = uni.getSystemInfoSync()
            this.statusBarHeight = res.statusBarHeight/(uni.upx2px(100)/100)
        },
        onShow() {
            this.listQuery.page = 1
            this.getData()
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        mounted() {
            this.setBgViewHeight()
        },
        onReachBottom() {
            if (this.total > this.walletList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        methods: {
            handleChange(item) {
                this.listQuery.page = 1
                this.listQuery.type = item.type
                this.getData()
            },
            async getWalletInfo() {
                this.walletInfo = await getWalletData()
                this.$store.dispatch("user/setPayment", this.walletInfo.payment)
                this.$store.dispatch("user/setBalance", this.walletInfo.balance)
            },
            async getData(more = false) {
                if (!more) {
                    uni.showLoading({
                        title: "加载中..."
                    })
                }
                const res = await getWalletLogPage(this.listQuery)
                if (more) {
                    this.walletList = [...this.walletList, ...res.items]
                } else {
                    this.walletList = res.items
                }
                this.total = res.total
                if (!more) {
                    uni.hideLoading()
                }
            },
            getIconSrc(money) {
                return  money*1 > 0 ? 'https://img.ionepin.com/cd0dba2f52d9d4e4b8adb1d9cf031f41fcd5e19f.png': 'https://img.ionepin.com/f0493e240a8570a3fed61ff5ead6781799b2ef7a.png'
            },
            setBgViewHeight() {
                var than = this
                const query = uni.createSelectorQuery().in(this);
                query.select('#bg').boundingClientRect(data => {
                    //console.log("节点离页面顶部的距离为" + data.height);
                    than.bgViewHeight = data.height
                    //console.log("得到布局位置信息" + JSON.stringify(data));
                }).exec();
            },
            rechange() {
                this.$u.route('pages_v2/wallet/recharge')
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: #F8F8F8;
    }
    .container {
        .navbar-right {
            font-size: 26rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #FFFFFF;
        }
        .bg {
            background: url("https://img.ionepin.com/ac2e81692bbe5f5dcf209a76021148287f1b1eb7.png") no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: calc(var(--status-bar-height) + 373rpx);
        }
        .balance-card {
            padding: 0 20rpx;
            margin-top: -197rpx;
        }
        .balance-info {
            border-radius: 22rpx;
            overflow: hidden;
            height: 390rpx;
            background: #FFFFFF;
            .balance-tips {
                background: #E4EBFF;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #356CE7;
                line-height: 50rpx;
                text-align: center;
            }
            .balance-label {
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #888888;
                text-align: center;
                margin-top: 50rpx;
            }
            .btn-info {
                display: flex;
                justify-content: center;
                margin-top: 60rpx;
                .btn-recharge {
                    box-sizing: border-box;
                    width: 310rpx;
                    height: 80rpx;
                    border-radius: 37rpx;
                    border: 1rpx solid #356CE7;
                    text-align: center;
                    line-height: 80rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #356CE7;
                    margin-right: 30rpx;
                }
                .btn-withdrawal {
                    box-sizing: border-box;
                    width: 310rpx;
                    height: 80rpx;
                    background: #E4EBFF;
                    border-radius: 37rpx;
                    text-align: center;
                    line-height: 80rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #356CE7;
                }
            }
        }
        .empty {
            padding: 50rpx 0;
        }
        .balance-log-card {
            padding: 30rpx 0;
            .balance-log {
                padding: 20rpx;
                background: #ffffff;
                .balance-list {
                    padding:30rpx 18rpx;
                    .balance-list-item {
                        margin-top: 40rpx;
                        display: flex;
                        align-items: flex-start;
                        &:first-child {
                            margin-top: 10rpx;
                        }
                        .balance-log-info {
                            margin-left: 18rpx;
                            flex: auto;
                            .balance-log-num {
                                display: flex;
                                justify-content: space-between;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
